import React from 'react';
import { List, InputItem, Button, Radio } from 'antd-mobile';
import { SetInputData } from '@/util/set';
import { connect } from 'react-redux';
import { register } from '@/redux/modules/userInfo';

const RadioItem = Radio.RadioItem;

@connect(
    state => ({user: state.user}),
    { register }
)
class Register extends SetInputData{
    constructor(props){
        super(props);

        this.state = {
            userName: '',
            password: '',
            userType: 0
        }

        this.cm = this.cm.bind(this);
    }

    cm(){
        this.props.register(this.state);
    }

    render(){
        
        const { setUserName, setPassword, cm, setUserType } = this;
        const { userName, password, userType } = this.state;
        const data = [
            { value: 0, label: '牛人' },
            { value: 1, label: 'boss' },
        ];
        return (
            <div>
                <h2>注册</h2>
                <List>
                    <InputItem defaultValue={userName} value={userName}  name="userName" onChange={setUserName}>用户名:</InputItem>
                    <InputItem defaultValue={password} value={password} type="password" name="password" onChange={setPassword}>密码:</InputItem>
                    
                    {data.map(i => (
                    <RadioItem key={i.value} checked={userType === i.value} onChange={() => {setUserType(i.value)}}>
                        {i.label}
                    </RadioItem>
                    ))}

                    <List.Item>
                        <Button type="primary" onClick={cm}>注册</Button>
                    </List.Item>
                </List>
            </div>
        )
    }
}

export default Register;